<template>

 <div>
    <h1>Todo List</h1>
    <div>
        <input type="text" v-model="newTodo" @keypress.enter="handleAddTodo">
    </div>
    <div>
        <ul>
            <li v-for="todoItem in todoStore.todos" :key="todoItem.id">
                <TodoItem :id="todoItem.id"/>
            </li>
        </ul>
    </div>
 </div> 

</template>

<script setup lang='ts'>
import {ref} from 'vue'
import TodoItem  from './TodoItem.vue';
import { useTodoStore } from '../store/todo';

let newTodo = ref("")
const todoStore = useTodoStore()

todoStore.updateTodoList()

const handleAddTodo = () => {
    todoStore.addTodo(newTodo.value)
    newTodo.value = ''
}
todoStore.updateTodoList()

</script>

<style scoped>

</style>
